<template>
	<view class="content-section">
		<!-- 标签栏 -->
		<TabBar :tabs="tabs" :active-tab="activeTab" @tab-change="handleTabChange" />

		<!-- 瀑布流内容 -->
		<WaterfallList :posts="postsWithLikeStatus" :item-width="itemWidth" @post-click="handlePostClick" />
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits, computed, watch, onMounted } from 'vue'
	import TabBar from '@/components/user/UserTabBar.vue'
	import WaterfallList from '@/components/post/WaterfallList.vue'
	import type { PostBasicInfo } from '@/api/post/post'
	import { usePostStore } from '@/store/modules/post'

	// 使用 Pinia store
	const postStore = usePostStore()

	// Props定义
	interface Props {
		tabs : string[]
		activeTab : number
		posts : PostBasicInfo[]
		itemWidth : number
	}

	const props = withDefaults(defineProps<Props>(), {
		tabs: () => ['笔记', '收藏', '赞过'],
		activeTab: 0,
		posts: () => [],
		itemWidth: 150
	})

	// 事件定义
	const emit = defineEmits<{
		tabChange : [index: number]
		postClick : [post: PostBasicInfo]
	}>()

	// 计算带有点赞状态的帖子列表
	const postsWithLikeStatus = computed(() => {
		return props.posts.map(post => {
			const isLiked = postStore.isPostLiked(post.id)
			return {
				...post,
				isLiked
			}
		})
	})

	// 监听store中的点赞状态变化
	watch(() => postStore.userLikedPostIds, () => {
		// 点赞状态变化时，computed会自动重新计算
		console.log('ContentSection: 点赞状态已更新')
	}, { deep: true })

	// 方法
	const handleTabChange = (index : number) : void => {
		emit('tabChange', index)
	}

	const handlePostClick = (post : PostBasicInfo) : void => {
		emit('postClick', post)
	}

	// 组件挂载时获取用户点赞状态
	onMounted(async () => {
		await postStore.fetchUserLikedPosts()
	})
</script>

<style lang="scss" scoped>
	.content-section {
		transform: translateY(-20px);
		background: white;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>